<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    .el-dropdown {
      vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }

  </style>

</head>
<body>

<script src="../js/Vue/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/Axios/axios-0.18.0.js"></script>

<div id="app">



  <el-container style="height: 700px">
    <el-header>

      <el-row style="margin-left: 85%">
        <el-button type="danger" round @click="loginOut()">退出登录</el-button>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">



        <el-row>
          <el-button type="primary" plain @click="getWares()">查看商品</el-button>
          <el-button type="primary" plain @click="getOrders()">查看订单</el-button>
        </el-row>



      </el-aside>
      <el-main>

        <iframe
                id="cIframe"
                class="c_iframe"
                name="cIframe"
                :src="iframeUrl"
                width="100%"
                height="650px"
                frameborder="0"
                v-show="!loading"
        ></iframe>


      </el-main>
    </el-container>
  </el-container>






</div>



<script>
  new Vue({

    el:"#app",

    data() {
      return {
        iframeUrl: 'wares.html'

        }
    },

    methods: {

      getWares() {
        this.iframeUrl = "wares.html";
      },
      getOrders() {
        this.iframeUrl = "orders.html";
      },
      loginOut(){
        let _this = this;
        axios({
          method:"post",
          url: "/user/loginOut",
          data: null
        }).then(function (resp2){

          _this.$message({
            message: '退出成功',
            type: 'success'
          });
          window.location.href = "../../index.html";

        })

      }



    }














  })

</script>



</body>
</html>